<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="8">
        <div>
          <h4>公共号设置</h4>
          <div>
            <singleImage v-model="infoData.wechatUrl"></singleImage>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <div>
          <h4>咨询热线设置</h4>
          <div>
            <el-form :model="infoData" label-position="right" ref="infoForm" label-width="90px" :inline="false" autocomplete="off" style="max-width:500px;">
              <el-form-item label="标题">
                <el-input placeholder="请输入" v-model="infoData.title" maxLength="100"></el-input>
              </el-form-item>
              <el-form-item label="电话">
                <el-input placeholder="请输入" v-model="infoData.phone" maxLength="100"></el-input>
              </el-form-item>
              <el-form-item label="其他说明">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="" v-model="infoData.content"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <h4 style="display: flex; justify-content: space-between;">
        <span>QQ号设置</span>
        <el-button v-if="infoData.list.length<5" icon="el-icon-plus" type="primary" plain size="mini" @click="handleAdd()">添加</el-button>
      </h4>
      <el-table v-loading="loading" ref="multipleTable" border :data="infoData.list">
        <el-table-column property="title" label="名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column property="content" label="内容" show-overflow-tooltip>
        </el-table-column>
        </el-table-column>
        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" @click="handleRemove(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-button style="margin-top: 20px;" type="primary" @click="saveEvent()">保存</el-button>
    </div>
    <edit v-if="edit" :data="selectTable" @confirmEvent="confirmEvent"></edit>
  </div>
</template>
<script>
import singleImage from '@/components/Upload/singleImage'
import edit from './edit'
import * as api from '@/utils/api'
export default {
  components: {
    singleImage,
    edit
  },
  data() {
    return {
      infoData: {
        list: []
      },
      curEditIndex: null,
      edit: false,
      loading: false
    }
  },
  created() {
    this.getucCooperation()
  },
  methods: {
    async getucCooperation() {
      try {
        const res = await api.getucCooperation()
        this.infoData = res
        console.log(res)
      } catch (err) {
        console.log(err)
      }
    },
    handleAdd() {
      this.selectTable = {}
      this.selectTable.method = 'add'
      this.edit = true
    },
    handleEdit(index, row) {
      this.curEditIndex = index
      this.selectTable = JSON.parse(JSON.stringify(row))
      this.selectTable.method = 'edit'
      this.edit = true
    },
    handleRemove(index, row) {
      this.infoData.list.splice(index, 1)
    },
    confirmEvent(data) {
      const curData = {
        title: data.title,
        content: data.content
      }
      if (data.method === 'add') {
        this.infoData.list.push(curData)
      } else {
        this.infoData.list[this.curEditIndex].title = data.title
        this.infoData.list[this.curEditIndex].content = data.content
      }
    },
    async saveEvent() {
      try {
        await api.modifyucCooperation(this.infoData)
        this.$notify({ title: '保存成功', type: 'success', duration: 3000 })
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
